.me {
  font-size: 46rpx;
  font-weight: bold;
  padding-left: 40rpx;
  //background: #FFF;
}

.home-title-container {
  margin-bottom: 36rpx;
  z-index: 2;
  position: relative;

  .home-main-title {
    font-size: 50rpx;
    font-weight: bold;
    height: 54rpx;
    line-height: 54rpx;
  }

  .home-sub-title {
    font-size: 28rpx;
    color: #989898;
  }
}

.chart-panel {
  background: #FFFFFF;
  border-radius: 20rpx;
}

.me-info {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
  //background: #FFF;
  padding-bottom: 40rpx;
  border-radius: 0 0 28rpx 28rpx;

  .avatar {
    margin: 40rpx 0 0 40rpx;
  }

  .nickname {
    margin: 40rpx 0 0 40rpx;
    line-height: 74px;

    .text {
      font-size: 40rpx;
      font-weight: bold;
    }
  }
}

.analysis {
  margin: 30rpx;
  border-radius: 30rpx;
  padding-bottom: 20rpx;

  .title {
    font-size: 36rpx;
    font-weight: bold;
    margin-top: 20rpx;
  }

  .subject {
    background: #FFF;
    margin-top: 20rpx;
    border-radius: 20rpx;
    padding: 10rpx 20rpx;

    .sub-title {
      font-size: 34rpx;
      margin-left: 20rpx;
      line-height: 34px;
      height: 34px;
    }

    .right-icon {
      height: 34px;
      line-height: 34px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}

.flex-space-between-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-center-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-start-center {
  display: flex;
  justify-content: start;
  align-items: center;
}

.chart-container {
  margin-top: 20rpx;

  .chart-card {
    background: #FFF;
    border-radius: 20rpx;
    padding: 20rpx 26rpx;
    margin-top: 20rpx;

    .main-title {
      font-size: 38rpx;
      font-weight: bold;
      color: #FF5184;
      margin-top: 20rpx;
    }

    .item-panel {
      margin: 20rpx 0rpx;

      .record-gradient-background {
        border-radius: 20rpx;
        background: linear-gradient(#fff2f4, #FFFFFF);
        border: 1px solid #ffbcd0;
        padding: 20rpx;
      }

      .item-panel-title {
        font-size: 30rpx;
        line-height: 42rpx;
        height: 42rpx;
        margin-bottom: 20rpx;
      }

      .item-panel-pj {
        width: 50%;
        text-align: center;

        .pj-title {
          font-size: 28rpx;
          line-height: 46rpx;
          height: 46rpx;
        }
      }
    }
  }
}

// 新增样式类
.record-page-container {
  padding: 22rpx 22rpx;
}

.dynamic-height-spacer {
  height: var(--dynamic-height);
}

.item-panel-title-with-margin {
  margin-top: 40rpx;
}

.large-bold-text {
  font-size: 50rpx !important;
  font-weight: bold;
}

.bold-text {
  font-weight: bold;
}

.tag-container {
  margin-left: 20rpx;
}

.info-box {
  border-radius: 30rpx;
  padding: 20rpx 30rpx;
  background: #F5F5F5;
  font-size: 26rpx;
  margin: 20rpx 0;
  color: #969696;
}

.chart-card-negative-padding {
  padding-top: -20rpx !important;
}

// 图表组件样式
.echarts-wrap-cycle {
  width: 100%;
  height: 240px;
}

.echarts-wrap-days {
  width: auto;
  height: 400rpx;
}

// 图表通用样式
.chart-wrapper {
  width: 100%;

  &.cycle-chart {
    height: 240px;
  }

  &.days-chart {
    height: 400rpx;
  }
}

// 图表颜色变量
:root {
  --chart-normal-color: #FF71A1;
  --chart-warning-color: #FFBB5E;
  --chart-active-bg-color: #000000;
  --chart-active-opacity: 0.08;
  --chart-border-radius: 20px;
}
